<#import "inc/macro-page.html" as panel>
<#import "macro-filter-card-box.html" as seachpanel>
<#escape x as x?html>
<@panel.header "干部队伍预警" "">
</@panel.header>
<@panel.body>
<!-- Bread crumb -->
<div class="row page-titles">
    <div class="col-md-5 align-self-center">
        <h3>干部队伍预警</h3> </div>
    <div class="col-md-7 align-self-center">
        <div class="page-nav-bar">
           <button class="btn btn-info btn-click-bind" data-sign="11">协理退休干部预警</button>
           <button class="btn btn-inverse btn-click-bind" data-sign="12" disabled>中层干部5年轮换预警</button>
        </div> 
    </div>
</div>
<!-- End Bread crumb -->
<!-- Container fluid  -->
<div class="container-fluid">
    <!-- Start Page Content -->                
         <div class="row">
             <div class="col-lg-12">
                 <div class="card">
					<div class="custom-card-header quick-bar">
						<div class="hint">&nbsp;</div>
						<@seachpanel.filterbox></@seachpanel.filterbox>
					    <button id="id-export-file" type="button" class="btn btn-dark btn-outline btn-sm m-l-10" title="导出"><i class="fa fa-share-square-o"></i></button>
					</div>
                 
                    <div class="card-body">
	                   	<div class="row m-t-20">
		                   	 <div class="col-lg-12">
		                   		<div id="id-leader-chart" style="height: 480px"></div>
		              		
		                         <table id="id-leader-table" class="table table-bordered content-center"  cellspacing="0" width="100%">
		                             <thead>
		                                 <tr>
		                                     <th>岗位</th>
		                                     <th>EPR号</th>
		                                     <th>姓名</th>
		                                     <th>年龄</th>
		                                     <th>上岗时间</th>
		                                     <th>在岗时间</th>
		                                     <th>轮岗年限要求</th>
		                                     <th>距离轮岗时间</th>
		                                 </tr>
		                             </thead>
		                         </table>
		              		</div>
	              		</div>
	              	</div>
            </div>
        </div>
    </div>
    <!-- End PAge Content -->
</div>
<!-- End Container fluid  -->
</@panel.body>
<@panel.footer>
<script type="text/javascript" src="${ROOT}/mind/js/plugins/alangyun-filterbox.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/datatables/datatables.min.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/datatables/jquery.dataTables.zh-CN.js"></script>
<script type="text/javascript" src="${ROOT}/mind/js/lib/echart/echarts.min.5.4.0.js"></script>
<script type="text/javascript">
	// word导出事件
	document.getElementById('id-export-file').addEventListener('click', function() {
		// Ensure echarts charts have finished rendering
		setTimeout(() => {
			var charts = document.querySelectorAll('canvas');
			charts.forEach(chart => {
				var dataURL = chart.toDataURL();
				var imgTag = '<img src="' + dataURL + '" width="650" />';
				chart.insertAdjacentHTML('beforebegin', imgTag);
				chart.style.display = 'none'; // Hide the original canvas
			});

			// Create a temporary container for the export
			var exportContainer = document.createElement('div');
			exportContainer.id = 'export-container';
			exportContainer.style.width = '100%';

			// Clone ECharts charts
			var chartContainer = document.getElementById('id-leader-chart').cloneNode(true);
			exportContainer.appendChild(chartContainer);


			var clonedTable = document.getElementById('id-leader-table').cloneNode(true);
// 直接添加内联样式到每个th和td元素
			clonedTable.querySelectorAll('th, td').forEach(function(cell) {
				cell.style.border = '1px solid #000';
				cell.style.borderCollapse = 'collapse'; // 注意：borderCollapse是CSS属性，不能作为内联样式设置，但这里为了示例而写
				cell.style.textAlign = 'center';
			});
			exportContainer.appendChild(clonedTable);

			// Convert the export container's HTML to a Word document
			var htmlHeader = `
          <!DOCTYPE html>
          <html>
          <head>
            <style>
               table, th, td {
                   border: 1px solid #000;
                   text-align: center;
                   border-collapse: collapse;
               }
            </style>
          </head>
          <body>`;
			var htmlFooter = `
          </body>
          </html>`;
			var htmlContent = htmlHeader + exportContainer.innerHTML + htmlFooter;

			var blob = new Blob([htmlContent], { type: 'application/msword' });
			var url = URL.createObjectURL(blob);
			var a = document.createElement('a');
			a.href = url;
			a.download = '中层干部5年轮换预警.doc';
			a.click();
			URL.revokeObjectURL(url);

			// Clean up by removing the temporary container
			exportContainer.remove();

			// Revert changes made to the document for export
			charts.forEach(chart => {
				chart.previousSibling && chart.previousSibling.remove();
				chart.style.display = 'block'; // Restore the original canvas
			});
		}, 1000); // Adjust the timeout as needed to ensure charts have rendered
	});
$(document).ready(function(){
	
	$(".btn-click-bind").click(function() {
		  var val = $(this).data("sign");
		  var ctx = "/l/lead";
		  if(12===val){
			  ctx = "/l/lead12";
		  }
		  window.location.href="${ROOT}" + ctx;
	});
	

    var $chart = echarts.init(document.getElementById("id-leader-chart"), null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
    window.addEventListener('resize', $chart.resize);

	var $table = null;
	var dataToTableView = function(currentData){
		if(!currentData){
			return;
		}
				
		if($table) {
			$table.fnClearTable();
			$table.fnDestroy();
		}
		
		$table = $("#id-leader-table").dataTable({
		    "ordering":false,
		    "searching": false,
		    "bFilter":false,
		    "info": false,
		    "paging": false,
		    'bAutoWidth':false,
		    "bDestroy" : true,
		    "aoColumns": [
		    	{'mData': 'job', sWidth: '100px', defaultContent: '' },
		    	{'mData': 'no', sWidth: '100px', defaultContent: '' },
		    	{'mData': 'name', sWidth: '100px', defaultContent: '' },
		    	{'mData': 'yearOld', sWidth: '100px', defaultContent: '' },
		    	{'mData': 'sgsj', sWidth: '100px', defaultContent: '', render: function(value){return moment(value).format("YYYY-MM-DD"); } },
		    	{'mData': 'zgsc', sWidth: '100px', defaultContent: '' },
		    	{'mData': 'lgnx', sWidth: '100px', defaultContent: '' },
		    	{'mData': 'jllgsj', sWidth: '100px', defaultContent: '' }
		    ],	
		    "data":currentData.tableData
		});
		$table.fnDraw();
	};
	
	//分析图
	var dataToChartView = function(currentData){
	
	      var option = {
	  	        color: ["#ef5350","#ffa206", "#1976d2","#58a2eb","#4caf50","#4caf50c0"],
			    title: {
			      text: '干部轮岗年限分布',
			      left: 'center'
			    },
			    tooltip: {
			      trigger: 'item'
			    },
			    legend: {
			      orient: 'vertical',
			      left: 'right',
			      top: 'center'
			    },
			    series: [
			      {
			        name: '年限分布信息',
			        type: 'pie',
			        radius: '50%',
			        data:currentData.chartData,
			        emphasis: {
			          itemStyle: {
			            shadowBlur: 10,
			            shadowOffsetX: 0,
			            shadowColor: 'rgba(0, 0, 0, 0.5)'
			          }
			        }
			      }
			    ]
		  };

	      if (option && typeof option === 'object') {
	    	  $chart.setOption(option);
	      }

	}
	var convertDataToView = function(svrData) {
		var ret = {
				chartData: [],
				tableData:[]
		}
		svrData.sums.forEach(item=>{
			ret.chartData.push({name: item.name, value: item.count});
		});
		ret.tableData = svrData.workers;
		
		return ret;
	};      
    
    // $('#id-export-file').click(function(){
    // 	var pdfCanvas = $.fn.pdfcanvas({
    // 		title: '干部轮岗年限分布',
    // 		keywords: '单位和部门：；岗位类别：'
    // 	})
    // 	pdfCanvas.addChart(document.querySelector("#id-leader-chart canvas"));
    // 	pdfCanvas.addPageBreak();
    // 	pdfCanvas.addDom(document.getElementById("id-leader-table"));
    // 	pdfCanvas.print();
    //
    // });
    //初始化过滤面板
    $.post('${ROOT}/l/treeNav',function(data, status){
    	if(data.code==="ok"){
			$.fn.filterBox({
				data: data.data,
					onsubmit: function(form, data){
					    $.post('${ROOT}/l/sumlead12',data,function(data, status){
					    	if(data.code==="ok"){
					    		if(data.data){
						    		currentData= convertDataToView(data.data);
						    		dataToChartView(currentData);
						    		dataToTableView(currentData);
						    	}else{
						    		toast.error("未找到可用的预警资料");
						    	}
					    	}else{
					    		toastr.error(data?data.desc:"远程查询离退干部预警资料失败了");
					    	}
					    }, 'json');
					}
				})
    	}
	});

    //先提取数据
    $.post('${ROOT}/l/sumlead',function(data, status){
    	if(data.code==="ok"){
    		if( data.data){
	    		currentData= convertDataToView(data.data);
	    		dataToChartView(currentData);
	    		dataToTableView(currentData); 
	    	}else{
	    		toastr.error("未找到可用的预警资料");
	    	}
    	}else{
    		$.toastr.error(data?data.desc:"远程查询干部预警资料失败了");
    	}
    }, 'json');
});
</script>
</@panel.footer>
</#escape>
